<template>
	<div class="special" :class="[{ white: loading }]">
		<div class="special-list">
			<van-skeleton :row="5" :loading="loading" :row-width="['15%', '15%', '15%', '15%', '15%']">
				<div class="special-item" v-for="(item, index) in specialList" :key="index" @click="$router.push(item.path)">
					<img :src="require('@/assets/images/index/special/' + item.imgUrl)" alt="" />
					<p>{{ item.name }}</p>
				</div>
			</van-skeleton>
		</div>
		<div class="special-package" @click="$router.push('/special-zero')">
			<van-skeleton :row="1" :loading="loading" :row-width="['98%']">
				<img class="package" src="@/assets/images/index/special/package.png" alt="" />
				<img class="go" src="@/assets/images/index/special/go.png" alt="" />
			</van-skeleton>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { Skeleton } from 'vant';
export default {
	name: 'special',
	components: {
		'van-skeleton': Skeleton
	},
	data() {
		return {
			loading: true,
			specialList: [
				{
					name: '今日爆款',
					imgUrl: 'fresh.png',
					path: '/special-fresh'
				},
				{
					name: '9.9包邮',
					imgUrl: 'free.png',
					path: '/special-free'
				},
				{
					name: '京东',
					imgUrl: 'jd.png',
					path: '/jd/jdList'
				},
				{
					name: '0元购',
					imgUrl: 'zero.png',
					path: '/special-zero'
				},
				{
					name: '限时抢购',
					imgUrl: 'falshsale.png',
					path: '/special-flash-sale'
				},

				{
					name: '大额券',
					imgUrl: 'hot.png',
					path: '/special-hot'
				}
			]
		};
	},
	created() {
		setTimeout(() => {
			this.loading = false;
		}, 500);
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	watch: {
		'userInfo.isWhite'(val) {
			console.log(val);
			console.log('活动');
			// if (val == 0) {
			// 	this.specialList = [
			// 		{
			// 			name: '今日爆款',
			// 			imgUrl: 'fresh.png',
			// 			path: '/special-fresh'
			// 		},
			// 		{
			// 			name: '9.9包邮',
			// 			imgUrl: 'free.png',
			// 			path: '/special-free'
			// 		},
			// 		{
			// 			name: '0元购',
			// 			imgUrl: 'zero.png',
			// 			path: '/special-zero'
			// 		},
			// 		{
			// 			name: '限时抢购',
			// 			imgUrl: 'falshsale.png',
			// 			path: '/special-flash-sale'
			// 		},

			// 		{
			// 			name: '大额券',
			// 			imgUrl: 'hot.png',
			// 			path: '/special-hot'
			// 		}
			// 	];
			// } else if (val == 1) {
			// 	this.specialList = [
			// 		{
			// 			name: '今日爆款',
			// 			imgUrl: 'fresh.png',
			// 			path: '/special-fresh'
			// 		},
			// 		{
			// 			name: '9.9包邮',
			// 			imgUrl: 'free.png',
			// 			path: '/special-free'
			// 		},
			// 		{
			// 			name: '0元购',
			// 			imgUrl: 'zero.png',
			// 			path: '/special-zero'
			// 		},
			// 		{
			// 			name: '限时抢购',
			// 			imgUrl: 'falshsale.png',
			// 			path: '/special-flash-sale'
			// 		},

			// 		{
			// 			name: '大额券',
			// 			imgUrl: 'hot.png',
			// 			path: '/special-hot'
			// 		},
			// 		{
			// 			name: '天猫国际',
			// 			imgUrl: 'tmall-global.png',
			// 			path: '/special-tmall-global'
			// 		},

			// 		{
			// 			name: '品牌优选',
			// 			imgUrl: 'hot.png',
			// 			path: '/special-brand'
			// 		}
			// 	];
			// }
		}
	},
	mounted() {},
	methods: {
		toPath(path) {
			if (path === '/special-new') {
				// 白名单入口
				if (this.userInfo.isWhite === 1) {
					this.$router.push('/special-zero');
				} else {
					this.$router.push(path);
				}
			} else {
				this.$router.push(path);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.special {
	margin-top: 10px;
	transition: 0.5s;
	padding: 0 15px;
	&.white {
		background: $color-white;
	}
	.special-list {
		height: 200px;
		@include flexBox(space-around);
		.special-item {
			text-align: center;
			img {
				width: 84px;
			}
			p {
				color: $text-black;
				font-size: 28px;
			}
		}
		.van-skeleton {
			width: 100%;
			padding: 0;
			.van-skeleton__content {
				padding-bottom: 50px;
				@include flexBox(space-around);
				.van-skeleton__row {
					margin-top: 0;
					width: 15%;
					padding-bottom: 15%;
					position: relative;
					border-radius: 8px;
					&::after {
						content: '';
						display: block;
						width: 100%;
						height: 30px;
						margin-top: 120%;
						border-radius: 8px;
						background-color: #f2f3f5;
					}
				}
			}
		}
	}
	.special-package {
		height: 140px;
		position: relative;
		margin-bottom: 25px;
		.package {
			width: 720px;
			margin: 0 auto;
			display: block;
		}
		.go {
			width: 50px;
			position: absolute;
			right: 80px;
			top: 60px;
			animation: animation_scal 2s infinite;
		}
		.van-skeleton {
			height: 100%;
			.van-skeleton__content {
				height: 100%;
				@include flexBox(null, center);
				.van-skeleton__row {
					height: 120px;
					border-radius: 8px;
					margin: 0 auto 10px;
				}
			}
		}
	}
}
@keyframes animation_scal {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	40% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
</style>
